<template>
	<div class="topBox">
		<div class="L"><a href="#">LOGO</a></div>
		<div class="C">
			<div class="saerchbox">
				<router-link :to="{ path: '/product/list' }">
					<input name="" type="text" placeholder="请输入您要搜索的内容" /><img
						src="/assets/images/ss.png"
					/>
				</router-link>
			</div>
		</div>
		<div class="R" @click="showPopup = true">
			<img src="/assets/images/tr.png" />
		</div>
	</div>
	<div class="clear"></div>
	<!-- 轮播图 -->
	<van-swipe :autoplay="3000" class="aui-m-slider">
		<van-swipe-item
			v-for="(item, index) in recommendlist"
			:key="item.id"
			style="text-align: center; max-height: 225px"
		>
			<router-link :to="{ path: '/product/info', query: { proid: item.id } }">
				<img
					:src="item.thumbs_text"
					style="max-height: 215px; object-fit: cover;width: 100%;"
				/>
			</router-link>
		</van-swipe-item>
	</van-swipe>
	<div class="clear"></div>
	<!--分类 -->
	<div class="lqgwBox">
		<ul>
			<li v-for="item in typelist" :key="item.id">
				<router-link
					:to="{ path: '/product/list', query: { typeid: item.id } }"
				>
					<img :src="item.thumb_text" />
					<p>{{ item.name }}</p>
				</router-link>
			</li>
		</ul>
	</div>
	<div class="clear"></div>
	<div class="contitbox">
		<p>新品<span>•</span>推荐</p>
	</div>
	<div class="clear"></div>
	<ul class="proul">
		<li v-for="item in newlist" :key="item.id">
			<div class="con">
				<router-link :to="{ path: '/product/info', query: { proid: item.id } }">
					<img :src="item.thumbs_text" />
					<p><span>￥</span>{{ item.price }}</p>
				</router-link>
			</div>
		</li>
	</ul>
	<div class="clear"></div>
	<div class="contitbox">
		<p>热销<span>•</span>单品</p>
	</div>
	<div class="clear"></div>
	<ul class="proul">
		<li v-for="item in hotlist" :key="item.id">
			<div class="con">
				<router-link :to="{ path: '/product/info', query: { proid: item.id } }">
					<img :src="item.thumbs_text" />
					<p><span>￥</span>{{ item.price }}</p>
				</router-link>
			</div>
		</li>
	</ul>
	<div class="clear"></div>
	<div class="h54"></div>
	<!-- 底部 -->
	<Bottom />
	<!-- 弹出层 -->
	<van-popup
		v-model:show="showPopup"
		position="right"
		:style="{ width: '30%', height: '100%' }"
	>
		<van-sidebar v-model="active" style="width: 100%">
			<van-sidebar-item
				:title="item.name"
				v-for="item in typelist"
				:key="item.id"
				:to="{ path: '/product/list', query: { typeid: item.id } }"
			/>
		</van-sidebar>
	</van-popup>
</template>

<script setup>
	import Bottom from "@/components/public/bottom.vue";
	const typelist = ref([]);
	const recommendlist = ref([]);
	const hotlist = ref([]);
	const newlist = ref([]);
	const showPopup = ref(false);
	const active = ref(0);
	// 轮播图
	const images = reactive([
		"/assets/images/banner.jpg",
		"/assets/images/banner.jpg",
		"/assets/images/banner.jpg",
		"/assets/images/banner.jpg",
	]);
	onBeforeMount(() => {
		getHomeData();
	});
	const getHomeData = async () => {
		let result = await Api.product.typeIndex();
		if (result.code == 1) {
			typelist.value = result.data;
		}
		let res = await Api.product.productIndex();

		if (res.code == 1) {
			recommendlist.value = res.data.recommendlist;
			hotlist.value = res.data.hotlist;
			newlist.value = res.data.newlist;
		}
	};
</script>

<style scoped lang="scss">
	.proul li .con a {
		img {
			width: 100%;
			height: 94px;
			object-fit: cover;
		}
	}

	
</style>